<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Tab.2.0</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script src="../jquery-1.6.2.min.js" type="text/javascript"></script>

    <link rel="stylesheet"  href="../reset.css"  />
    <style type="text/css">
        .tab{width: 400px; height: 300px ;  }
        .tab .tabbd{ position: relative; width: 400px; height: 300px ;}
        .tab .tabbd li{ position: absolute;width: 400px; height: 300px ; }

        /*----------- style ---------*/
        .tab{ position: relative; }
        .tab .tabhd{ position: absolute; bottom: 0; left: 120px;z-index: 2;}
        .tab .tabhd li{ float: left; padding: 5px; cursor: pointer; }

        .tab .tabbd li img{   background: #fef1ec;width: 400px; height: 300px ;  }
        .tab .tabhd li:hover,.tab .tabhd li.ac{background: #cccc00;}
        .tab .tabbd li.ac{ display: block;}
        .tab .point{ position: absolute; bottom: 0; }
        .tab .next{right:0;   }

    </style>

</head>
<body>
<div class="tab tabstyle">
    <ul class="tabhd">
        <li >
            1
        </li>
        <li >
            2
        </li>
        <li >
            3
        </li>
        <li >
            4
        </li>
    </ul>
    <ul class="tabbd">
        <li >
            <img src="http://i8.topit.me/8/12/38/11260116975e138128l.jpg" alt="">
        </li>
        <li >
            <img src="http://if.topit.me/f/b2/e2/1124872743158e2b2fl.jpg" alt="">
        </li>
        <li >
            <img src="http://i11.topit.me/l/201101/16/12951633217724.jpg" alt="">
        </li>
        <li >
            <img src="http://i2.topit.me/2/f0/a6/11205975477aba6f02l.jpg" alt="">
        </li>
    </ul>
    <a class="point prev" href=""> 上一个</a>
    <a class="point next" href=""> 下一个 </a>

</div>
<script type="text/javascript">
(function($){

	$.fn.Tab=function(options){
		var opt=$.extend({},$.fn.Tab.settings,options);
		return this.each(function(){
			var	$this=$(this),
                tab=new Tab(opt,$this);
				tab.init();

		});
	};
	var Tab=function(options,obj){
		this.o = options;
		this.$tab = obj;
        this.$tabhdli = this.$tab.find(this.o.ele.tabhdli);
        this.$tabbdli = this.$tab.find(this.o.ele.tabbdli);
        this.$prev = this.$tab.find(this.o.ele.prev);
        this.$next = this.$tab.find(this.o.ele.next);
        this.tablen = this.$tabbdli.length;
        this.timer=0;

	};
	Tab.prototype={
		init:function(obj){
            this.shownext(this.$tabhdli.eq(this.o.curnum),this.$tabbdli.eq(this.o.curnum));
            this.$tabbdli.slice(1).hide();
            this._bindevent();
            if(this.o.auto){
                this.play();
            }
		},
        _bindevent:function(){
            var  _this=this;


            this.$prev.bind('click',function(){
                var cur=_this.o.curnum,
                    next=cur,
                    tablen=_this.tablen-1;
                 next=cur-1;
                 if(cur===0){
                     next=tablen;
                 }
                 _this.hidecur(_this.$tabhdli.eq(cur),_this.$tabbdli.eq(cur));
                 _this.shownext(_this.$tabhdli.eq(next),_this.$tabbdli.eq(next));

                 _this.o.curnum = next;

                return  false;
            });
            this.$next.bind('click',function(){
                var cur=_this.o.curnum,
                    next=cur,
                    tablen=_this.tablen-1;
                next=cur+1;
                if(cur===tablen){
                    next=0;
                }
                _this.hidecur(_this.$tabhdli.eq(cur),_this.$tabbdli.eq(cur));
                _this.shownext(_this.$tabhdli.eq(next),_this.$tabbdli.eq(next));

                _this.o.curnum = next;

                return  false;
            });
            this.$tabhdli.bind(this.o.eventType,function(){
                var cur=_this.o.curnum,
                    next=_this.$tabhdli.index(this);

                    _this.hidecur(_this.$tabhdli.eq(cur),_this.$tabbdli.eq(cur));
                    _this.shownext(_this.$tabhdli.eq(next),_this.$tabbdli.eq(next));
                _this.o.curnum = next;

            });
            this.$tab.bind('mouseover',function(){
                _this.stop();
            });
            this.$tab.bind('mouseout',function(){
                if(_this.o.auto){
                    _this.play();
                }
            });



        },
        stop:function(){
            clearTimeout(this.timer);
        },
        play:function(){
            var _this=this;
                 this.timer=setTimeout(function(){
                     _this.$next.click();
                     _this.play();
                 },this.o.autoTime);

        },
        shownext:function($nexthd,$nextbd){
            $nexthd.addClass(this.o.acclass);
            $nextbd.addClass(this.o.acclass);
            if(this.o.fx.next($nexthd,$nextbd)===true){
                $nextbd.stop(true,true).fadeIn(this.o.time);
            }

        },
        hidecur:function($curhd,$curbd){
            $curhd.removeClass(this.o.acclass);
            $curbd.removeClass(this.o.acclass);
            if(this.o.fx.cur($curhd,$curbd)===true){
                $curbd.stop(true,true).fadeOut(this.o.time);
            }
        }

    };


	$.fn.Tab.settings={
        ele:{
            tabhdli:'.tabhd>li',
            tabbdli:'.tabbd>li',
            prev:'.prev',
            next:'.next'

        },
        auto:false,
        autoTime:1500,
        time:500,
        acclass:'ac',
        curnum:0,
        eventType:'mouseover',
        fx:{
            next:function($nextbd,$nexthd){
                return true;
            },
            cur:function($curhd,$curbd){
                return true;
            }
        }
   }
})(jQuery);

$('.tab').Tab({
    auto:true
});
</script>
</body>
</html>